<template>
	<view class="content">
		<!-- // 顶部导航 -->
		<MyHeader :recommend_cate="recommend_cate"></MyHeader>
		<!-- 首页轮播 -->
		<IndexSwiper :banner="banner"></IndexSwiper>
	<!-- 	首页服务项和商品导航 -->
		<IndexService :service="service" :icon="icon"></IndexService>
	<!-- 	首页广告 -->
		<IndexAD :ad="ad"></IndexAD>
	<!-- 	楼层一 -->
		<view class="floor" v-for="(item, index) in floor" :key="index">
			<Title :name='item.content[0].title'></Title>
			<template v-if="item.content.length == 1">
				<view class="adimg">
					<image :src="imgUrl + item.content[0].img" mode=""></image>
				</view>
			</template>
			<template v-else>
				<IndexTable :content="item.content"></IndexTable>
			</template>
		<!-- 	商品列表 -->
				<ShopList :product="item.product"></ShopList>
				
			
		</view>
		<!-- 楼层二 -->
		<!-- <view class="floor">
			<Title name="魅族声乐"></Title>
			<IndexTable></IndexTable>
			<view class="shopList">
				<ShopItem></ShopItem>
				<ShopItem></ShopItem>
				<ShopItem></ShopItem>
				<ShopItem></ShopItem>
			</view>
		</view> -->
		<!-- ；楼层三 -->
		<!-- <view class="floor">
			<Title name="魅族声乐"></Title>
			<IndexTable></IndexTable>
			<view class="shopList">
				<ShopItem></ShopItem>
				<ShopItem></ShopItem>
				<ShopItem></ShopItem>
				<ShopItem></ShopItem>
			</view>
		</view> -->
	</view>
</template>

<script>
	import MyHeader from '../../components/header.vue'
	import IndexSwiper from '../../components/indexSwiper.vue'
	import IndexService from '../../components/indexService.vue'
	import IndexAD from '../../components/indexAD.vue'
	import Title from '../../components/title.vue'
	import ShopList from '../../components/shopList.vue'
	import IndexTable from '../../components/indexTable.vue'
	
	export default {
		data() {
			return {
				imgUrl:this.$imgUrl,
				title: 'Hello',
				banner: [], //轮播图
				recommend_cate:[] ,//顶部推荐分类
				service:[], // 服务分类 请求数据里面面叫active
				icon:[] ,//分类导航
				ad:[],// 首页广告
				floor:[]//楼层导航
			}
		},
		components: {
			MyHeader,
			IndexSwiper,
			IndexService,
			IndexAD,
			Title,
			ShopList,
			IndexTable
			
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(){
				uni.request({
				    url: this.apiUrl + '/index/index', 
				    success: (res) => {
				        console.log(res.data);
						var {data} = res.data;
						console.log(data)
						this.banner = data.banner
						this.recommend_cate = data.recommend_cate
						// console.log(this.recommend_cate)
						this.service = data.active
						// console.log(this.service)
						this.icon = data.icon
						// console.log(this.icon)
						this.ad = data.floor
						// console.log(this.ad)
						this.floor = data.cate
						console.log(this.floor)
				    }
				});
			}
		}
	}
</script>

<style>
	// 设置首页页面背景颜色
	page{
		background: #f4f4f4;
	}
	.adimg{
		height: 344rpx;
		width: 100%;
	}
	.adimg image{
		width: 100%;
		height: 344rpx;
	}
	
	
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
</style>
